<template>
  <main-container>
    <div class="log-list-page">
      <search-form class="mb20">
        <search-item label="操作时间：">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH-mm-ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleSearchDate"
          ></el-date-picker>
        </search-item>
        <search-item label="用户：">
          <el-input v-model="userName" clearable placeholder="请输入用户"></el-input>
        </search-item>
        <search-item>
          <el-button class="w100" type="primary" plain @click="handleQuery">搜索</el-button>
        </search-item>
        <search-item slot="action">
          <el-button type="text" icon="el-icon-refresh" @click="init">刷新列表</el-button>
        </search-item>
      </search-form>
      <v-table
        ref="table"
        :isShowOrder="false"
        :total="total"
        :current-page="page"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
        :data="tableData"
        :columns="columns"
      >
      </v-table>
    </div>
  </main-container>
</template>

<script>
import table from '@/common/mixins/table'
import { getLogList } from '@/api/workbench'
import { formatTime } from '@/utils'

export default {
  name: 'logList',
  mixins: [table],
  data() {
    return {
      date: null,
      startTime: '',
      endTime: '',
      userName: '',
      tableData: [],
      columns: [
        {
          label: 'ID',
          prop: 'id'
        },
        {
          label: '用户',
          prop: 'username',
          render: (h, params) => {
            let { username } = params.row
            return h('span', username || '-')
          }
        },
        {
          label: '操作记录',
          prop: 'description'
        },
        {
          label: '记录时间',
          prop: 'createTime',
          render: (h, params) => {
            let { createTime } = params.row
            return h('span', createTime ? formatTime(new Date(createTime)) : '-')
          }
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * 操作记录列表
     */
    async init() {
      let { startTime, endTime, userName, page, pageSize } = this
      let res = await getLogList({ startTime, endTime, userName, page, rows: pageSize })
      let { code, data } = res
      if (code === 0) {
        let { records, logList = [] } = data
        this.total = records
        this.tableData = logList
      }
    },
    /**
     * 处理操作日期
     */
    handleSearchDate(e) {
      let [startTime = '', endTime = ''] = e || []
      this.startTime = startTime
      this.endTime = endTime
    },
    /**
     * 搜索
     */
    handleQuery() {
      this.page = 1
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
